<!DOCTYPE html>
<html lang="en">

<head>
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
    <meta name="viewport" content="width=device-width,initial-scale=1">
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
    <meta name="description" content="上海大学开源镜像站，致力于为上大校内提供高质量的开源软件镜像、Linux镜像源服务，帮助校内用户更方便地获取开源软件。本镜像站由上海大学开源社区负责维护">
    <meta name="keywords" content="镜像站,镜像源,Linux,开源,软件源"> 
    <meta name="author" content="SHUOSC">
    <title>上海大学开源镜像站</title>
    <link href="/src/element-ui.css" rel="stylesheet">
    <link href="/src/mirrors.css" rel="stylesheet">
    <link rel="shortcut icon" href="/favicon.ico">
</head>

<body>
    <div id="menu">
        <div class="container">
        <el-menu :default-active="activeIndex" mode="horizontal" >
            <div class="title">上海大学开源镜像站</div>
            <div class="navBar">
                <el-menu-item index="1"><a href="#mirrors-list">源列表</a></el-menu-item>
                <el-menu-item index="2"><a href="https://wiki.shuosc.org/help">使用帮助</a></el-menu-item>
                <el-menu-item index="3"><a href="#isos">获取发行版</a></el-menu-item>
                <el-menu-item index="4"><a href="#news">镜像站通知</a></el-menu-item>
            </div>
        </el-menu>
        </div>
    </div>
    
    <div id="mirrors-list">
        <div class="container">
        <div class="bar">
            <div class="title">源列表</div>
            <el-input v-model="search" placeholder="输入关键词筛选镜像" class="search"></el-input>
        </div>
        <template>
            <el-table :data="searchData" stripe style="width: 100%" >
                <el-table-column prop="name" label="镜像名" width="200" sortable>
                    <template scope="scope">
                        <a v-bind:href="[scope.row.url]">{{scope.row.name}}</a>
                        <el-tag v-if="scope.row.isNew" type="primary">新</el-tag>
                    </template>
                </el-table-column>
                <el-table-column prop="sources" label="上游地址" width="360"></el-table-column>
                <el-table-column prop="taskStatus" label="同步状态" width="120">
                    <template scope="scope">
                                <el-tag v-if="scope.row.taskStatus == '1'">正在同步</el-tag>     
                                <el-tag v-else-if="scope.row.taskStatus == '0'" type="primary">尚未同步</el-tag>
                                <el-tag v-else-if="scope.row.taskStatus == '2'&&scope.row.exitcode == '0'" type="success">同步完成</el-tag>
                                <el-tag v-else type="danger">同步出错</el-tag>
                            </template>
                </el-table-column>
                <el-table-column prop="updateTime" label="最近一次同步时间">
                    <template scope="scope">
                                <div v-if="scope.row.updateTime == ''">Unknow</div>
                                <div v-else>{{scope.row.updateTime}}</div>
                            </template>
                </el-table-column>
                <el-table-column prop="help" label="帮助" width="100" sortable>
                    <template scope="scope">
                                <a v-if="scope.row.help !== ''" :href="scope.row.help" target="_blank">Help</a>
                            </template>
                </el-table-column>
            </el-table>
        </template>
        </div>
    </div>

    <div id="news">
        <div class="container">
            <div class="bar">
                <div class="title">镜像站通知</div>
            </div>
            <ul v-if="isNull" v-cloak>暂无通知</ul>
            <ul v-else id="news-lists">
                <li v-for="item in items" v-cloak><a :href="item.url" v-cloak>{{item.title}}</a></li>
            </ul>
        </div>
    </div>
    
    <div id="links">
        <div class="container">
            <div class="bar">
                <div class="title">常用链接</div>
                <p><a :href="link.url" v-for="link in links" v-cloak>{{link.title}}</a>
                    <script src="https://s13.cnzz.com/z_stat.php?id=1264366993&web_id=1264366993" language="JavaScript"></script></p>
            </div>
        </div>
    </div>

    <div id="isos">
        <div class="container">
            <div class="bar">
                <div class="title">获取发行版</div>
            </div>
            <template>
                <el-select v-model="linux" placeholder="请选择发行版类型" @change="changeReleases">
                    <el-option v-for="item in isos" :key="item.value" :label="item.label" :value="item.value">
                    </el-option>
                </el-select>
                <el-select v-model="url" placeholder="请选择版本号" @change="generateUrl">
                    <el-option v-for="item in releases"  :key="item.value" :label="item.label" :value="item.value">	
                    </el-option>
                </el-select>
                <a v-if="download" :href="url"><el-button type="primary">下载</el-button></a>
            </template>
        </div>
    </div>
    
    <div id="copyright">
        <div class="container">
            <div class="content">
                <p>上海大学开源镜像站是由<a href="http://www.its.shu.edu.cn" target="_blank">上海大学信息化办公室</a>提供基础设施支持，由<a href="https://nita.shu.edu.cn" target="_blank">上海大学NITA实验室</a>提供服务器支持，由<a href="https://osc.shu.edu.cn" target="_blank">上海大学开源社区</a>负责管理维护。</p>
                <p>上海大学开源社区（SHU Open Source Community）是由上海大学的开源技术爱好者于 2010 年自主发起成立的非营利性学生组织。上海大学开源社区的宗旨是：面向全校师生传播开源理念、分享技术知识；为上海大学的开源技术爱好者提供公共服务，建立开放友好的技术交流平台；弘扬自由软件精神，培养自由软件社区文化氛围，为开源事业做出贡献。    </p>
            </div>
            <div class="logo">上海大学开源社区</div>
        </div>
    </div>
    <script src="/src/vue.min.js"></script>
    <script src="/src/element-ui.js"></script>
    <script src="/src/axios.js"></script>
    <script>
        var menu = new Vue({
            el: '#menu',
            data: {
                activeIndex: '1'
            }
        })
        var mirrors = new Vue({
            el: '#mirrors-list',
            data: {
                search: '',
                items: []
            },
            created: function() {
                this.loadMirrors();
            },
            methods: {
                loadMirrors: function () {
                    axios.get('/data/mirrors.json')
                    .then(function (response) {
                        mirrors.items = response.data.mirrors;
                    });
                    axios.get('/data/task_status.json')
                    .then(function (response) {
                        for(item of mirrors.items){
                            var name = item.name;
                            var data = response.data[name];
                            console.log(data);
                            item.taskStatus = data['status'];
                            if(typeof(data['date'])!== "undefined"){
                                item.updateTime = data['date'];
                            }
                            if(typeof(data['exitcode'])!== "undefined"){
                                item.exitcode = data['exitcode'];
                            }
                            if(typeof(data['upstream'])!== "undefined"){
                                item.sources = data['upstream'];
                            }
                        }
                    });
                }
            },
            computed: {
                searchData: function() {
                    var search = this.search;
                    var vm = this;
                    if (search) {
                        return this.items.filter(function(item) {
                            return Object.keys(item).some(function(key) {
                                return String(item[key]).toLowerCase().indexOf(search) > -1
                            })
                        })
                    }
                    vm.items = vm.items.sort(function(x, y) {
                        return x.name.localeCompare(y.name);
                    });
                    return vm.items;
                }
            }
        })
        var isos = new Vue({
            el: '#isos',
            data: {
                selectedOptions: [],
                linux: '',
                releases: '',
                url: '',
                download: false,
                isos: []
            },
            created: function() {
                this.loadIsos();
            },
            methods:{
                loadIsos: function () {
                    axios.get('/data/mirrors.json')
                    .then(function (response) {
                        isos.isos = response.data.isos;    
                    })
                    .catch(function (error) {
                        console.log(error);
                    });
                },
                changeReleases: function() {
                    for(var item of this.isos) {
                        if(item.value == this.linux){
                            this.releases = item.children;					
                        }		
                    }
                    document.getElementsByClassName('el-input__inner')[2].value = '';
                    this.download = false;
                },
                generateUrl: function(){
                    this.download = true;
                }
            }
        })
        var news = new Vue({
            el: '#news',
            data: {
                isNull: true,
                items: []   
            },
            created: function() {
                this.loadNews();
            },
            methods: {
                loadNews: function () {
                    var vm = this;
                    axios.get('/news/recent.json')
                    .then(function (response) {
                        if(response.data!==null){
                            vm.isNull = false;
                            vm.items = response.data;
                            for(var item of vm.items){
                                item.url = "/news/p/"+item.abbrlink+".html";
                            }
                        }                   
                    })
                    .catch(function (error) {
                        console.log(error);
                    });
                }
            }
        })
        var links = new Vue({
            el: '#links',
            data: {
                links:[{
                    title: 'Github',
                    url: 'https://github.com/shuopensourcecommunity'
                },{
                    title: '提交问题或建议',
                    url: 'https://github.com/shuopensourcecommunity/mirrors.shuosc.org/issues/new'
                },{
                    title: 'SHUhelper',
                    url: 'https://www.shuhelper.cn'
                },{
                    title: '在线交流',
                    url: 'https://t.me/joinchat/ErK1eQ6s9-axpVr75Oiwww'
                },{
                    title: 'Git@SHUOSC',
                    url: 'https://git.shuosc.org'
                },{
                    title: 'NPM镜像',
                    url: 'https://npm.shuosc.org'
                },{
                    title: 'Pypi镜像',
                    url: 'https://pypi.shuosc.org'
                }]   
            }
        })

    </script>
</body>

</html>